<script lang="ts" setup>
  import { departmentListApi } from '@/api/consult'
  import type { DepartData } from '@/types/consult'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, computed } from 'vue'

  const depList = ref<DepartData[]>([])

  onLoad(async (params) => {
    const res = await departmentListApi()
    depList.value = res
  })

  const activeIndex = ref(0)
const childList = computed(() => depList.value[activeIndex.value]?.child)

interface Props {
  type: number,
  illnessType: number,
}
  defineProps<Props>()
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(item, index) in depList"
        :key="item.id"
        class="department-item"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index"
        >{{ item.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="item in childList"
        :key="item.id"
        hover-class="none"
        :url="`/subpkg_consult/description/description?type=${type}&illnessType=${illnessType}&depId=${item.id}`"
        class="department-item"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './department.scss';
</style>
